<template>
    <div>
        <el-header class="head">
            <el-row :gutter="20">
                <!-- <el-col :span="2"> -->
                    <!-- <img class="logo" src="../assets/logo.png" /></el-col> -->
                <el-col :span="12">
                    <h1 class="title">在线图书商城</h1>
                </el-col>
                <el-col :span="10" class="head-login">
                    <router-link to="/"><span class="login-l"  v-if="token">首页</span></router-link>
                    <span class="login-l" @click="toCart" v-if="token">购物车</span>
                    <span class="login-l" @click="toOrder" v-if="token">我的订单</span>
                    <router-link to="/login"><span class="login-l" v-if="!token">登录</span></router-link>
                    <span class="login-l" @click="toMyself" v-if="token">个人中心</span>
                </el-col>
                <el-col :span="2" class="btn"><el-button type="primary" size="small"
                        @click="LoginOut" v-if="token">退出</el-button></el-col>
            </el-row>
        </el-header>
    </div>
</template>

<script>
import { toRefs, reactive } from '@vue/reactivity'
// import {  } from "../utils/clientApi"
import { useRouter } from "vue-router"
import { ElMessage } from 'element-plus';
export default {
    name: "indexHeader",
    setup(props) {
        const router = useRouter()
        const data = reactive({
            token: ""
        })
        data.token = JSON.parse(localStorage.getItem("token"))
        //    跳转购物车
        const toCart = () => {
            const user = JSON.parse(localStorage.getItem("userInfo"))
            if (JSON.parse(localStorage.getItem("token")) && user) {
                router.push({
                    path: "/cart",
                })
            } else {
                ElMessage.error("当前未登录")
                router.push({
                    path: "/login",
                })
            }
        }
        //      跳转订单页面
        const toOrder = () => {
            const user = JSON.parse(localStorage.getItem("userInfo"))
            if (JSON.parse(localStorage.getItem("token")) && user) {
                router.push({
                    path: "/order",
                })
            } else {
                ElMessage.error("当前未登录")
                router.push({
                    path: "/login",
                })
            }
        }

        // 跳转到 到个人中心
        const toMyself = () => {
            router.push({
                path: "/myself",
            })
        }


        // 退出登录
        const LoginOut = () => {

          
           
            localStorage.removeItem("userInfo");
            localStorage.removeItem("token");
            // window.location.reload()
             router.push({
                path: '/'
            })
        }

        return {
            ...toRefs(data), toCart, toOrder, toMyself, LoginOut
        }

    }
}
</script>

<style scope>
.head {
    width: 100%;
    height: 58px;
    margin: 0 auto;
    background: #F5F5F5;
}

.el-header {
    --el-header-height: 80px;
}

.head-login {
    padding-top: 22px;
    text-align: right;

}

a {
    color: #5e5d5d;
    text-decoration: none;
}

.router-link-active {
    text-decoration: none;
}

.login-l:hover {
    cursor: pointer;
    color: #0098f7;
}

.login-l {

    margin-right: 5px;
}

.register:hover {
    color: #0098f7;
}

.btn {
    padding-top: 30px;
}

.logo {
    width: 62px;
    height: 62px;
    float: left;
}

.title {
    display: block;
    position: relative;
    width: 260px;
    height: 36px;
    font-size: 28px;
    left: -60px;
    top: -11px;
}

.btn {
    margin-top: -10px;
}
</style>